<script>
import FullCalendar from '@fullcalendar/vue3'
import interactionPlugin from '@fullcalendar/interaction'
import dayGridPlugin from '@fullcalendar/daygrid'

export default {
  components: {
    FullCalendar // make the <FullCalendar> tag available
  },
  data: function () {
    return {
      signedDates: new Set(),
      dialogVisible: false,
      calendarOptions: {
        plugins: [dayGridPlugin, interactionPlugin],
        initialView: 'dayGridMonth',
        weekends: true,
        events: [{ title: '签到', start: new Date() }],
        selectable: true,
        eventClick: this.handleDateClick,
        dateClick: this.handleDateClick
      }
    }
  },
  methods: {
    // 签到
    handleDateClick(info) {
      const clickedDate = new Date(info.date)
      const currentDate = new Date()

      // 将点击的日期和当前日期转换为 YYYY-MM-DD 格式，以便比较
      const clickedDateStr = clickedDate.toLocaleDateString('en-CA')
      const currentDateStr = currentDate.toLocaleDateString('en-CA')
      // 检查是否是当天日期
      if (clickedDateStr === currentDateStr) {
        // 检查日期是否已经签到
        if (!this.signedDates.has(clickedDateStr)) {
          // 在事件数组中添加签到记录
          this.calendarOptions.events.push({
            title: '签到成功',
            start: clickedDateStr
          })
          alert('签到成功')
          // 更新已签到日期集合
          this.signedDates.add(clickedDateStr)

          // 更新 FullCalendar
          this.$refs.fullCalendarRef.getApi().render()
        } else {
          // 提示用户已经签到过了，或者执行其他逻辑
          alert('已经签到过了')
        }
      } else {
        // 提示用户只能在当天签到
        alert('只能在当天签到')
      }
    },
    getSignedEvents() {
      const mockSignedEvents = [
        { title: '签到', start: '2024-01-01T10:00:00' },
        { title: '签到', start: '2024-01-03T14:30:00' }
      ]
      mockSignedEvents.forEach((event) => {
        const dateStr = new Date(event.start).toLocaleDateString('en-CA')
        this.signedDates.add(dateStr)
      })
      return mockSignedEvents
    }
  }
}
</script>

<template>
  <el-card class="box-card">
    <FullCalendar
      :options="calendarOptions"
      style="width: 1200px"
      ref="fullCalendarRef"
    >
      <template v-slot:eventContent="arg">
        <b>{{ arg.timeText }}</b>
        <i>{{ arg.event.title }}</i>
      </template>
    </FullCalendar>
  </el-card>

  <el-dialog v-model="dialogVisible" title="考勤" width="30%">
    <span>请问是否考勤</span>
    <template #footer>
      <span class="dialog-footer">
        <el-button type="primary" @click="dialogVisible = false">
          确认
        </el-button>
        <el-button @click="dialogVisible = false">取消</el-button>
      </span>
    </template>
  </el-dialog>
</template>
<style scoped></style>
